<!-- 选项设置->财务 -->
<template>
  <a-row style="height:100%;position:relative;">
    <a-col span="24" style="height: calc(100% - 50px);overflow-y:auto;">
      <!---科目设置--->
      <a-col span="24">
        <card-wrapper :title="'科目设置'">
          <template v-slot:slot-1>
            <a-row v-for="(item, index) in data" :key="index">
              <!-- 写死的（科目设置） -->
              <a-col v-if="item.parentName=='科目设置'" :span="24" @mouseenter="hover(item)" class="back">
                <a-row v-if="item.code=='TradeKind'">
                  <a-col :span="3" class="text-after-radio">{{item.name}}</a-col>
                  <a-col :span="15">
                    <a-select :default-value="item.value" style="width: 220px" v-show="item.isVisible==1" :disabled="item.isEnable==0" @change="value => handleSelectChange(value,item.code)">
                      <a-select-option value="1">
                        2014年小企业会计准则
                      </a-select-option>
                      <a-select-option value="2">
                        2015年小企业会计准则
                      </a-select-option>
                      <a-select-option value="3">
                        2019年小企业会计准则
                      </a-select-option>
                    </a-select>
                    <a-button @click="preview" style="margin-left:10px;" size="small">科目预览</a-button>
                  </a-col>
                </a-row>
                <a-checkbox v-else class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
              </a-col>
            </a-row>
          </template>
        </card-wrapper>
      </a-col>

      <!---凭证制单--->
      <a-col span="24">
        <card-wrapper :title="'凭证制单'">
          <template v-slot:slot-1>
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.parentName=='凭证制单'" :span="24" @mouseenter="hover(item)" class="back">
                <a-col :span="3" class="text-after-radio">{{item.name}}</a-col>
                <a-col :span="15">
                  <a-select :default-value="item.value" style="width: 220px" v-show="item.isVisible==1" :disabled="item.isEnable==0" @change="value => handleSelectChange(value,item.code)">
                    <a-select-option value="1">
                      记账凭证1
                    </a-select-option>
                    <a-select-option value="2">
                      记账凭证2
                    </a-select-option>
                    <a-select-option value="3">
                      记账凭证3
                    </a-select-option>
                  </a-select>
                </a-col>
              </a-col>

              <a-col v-if="item.parentName=='凭证类别'" @mouseenter="hover(item)" class="back">
                <a-checkbox class="padding-5 padding-left-89" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
              </a-col>
            </a-row>
          </template>
        </card-wrapper>
      </a-col>

      <!---流程管控--->
      <a-col span="24">
        <card-wrapper :title="'流程管控'">
          <template v-slot:slot-1>
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.parentName=='流程管控'" :span="24" @mouseenter="hover(item)" class="back">
                <a-checkbox class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value!=0" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
                
                <a-col :span="24" class="text-after-radio padding-left-20" v-show="item.code == 'IsControlCapAndARAPDeficit' && item.value != 0">
                  <span class="padding-left-8">控制方式：</span>
                  <a-radio-group :value="Number(item.value)" @change="value => handleRadioChange(value,item.code)">
                    <a-radio :value="1">
                      控制
                    </a-radio>
                    <a-radio :value="2">
                      提示
                    </a-radio>
                  </a-radio-group>
                </a-col>
              </a-col>
            </a-row>
          </template>
        </card-wrapper>
      </a-col>
      <!-- 资产管理 -->
      <a-col span="24">
        <card-wrapper :title="'资产管理'">
          <template v-slot:slot-1>
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.parentName=='资产管理'" :span="24" @mouseenter="hover(item)" class="back">
                <a-checkbox class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value!=0" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
              </a-col>
            </a-row>
          </template>
        </card-wrapper>
      </a-col>

    </a-col>
    <previewSubject ref="previewSubject"></previewSubject>
    <div class="btn-save">
      <div class="box">
        <a-button type="primary" @click="submit">保存</a-button>
      </div>
    </div>
  </a-row>
</template>
<script>
import previewSubject from "../model/previewSubject"; // 科目预览
import { cardWrapper } from "@/components/CardWrapper"; // 分类外框
import { list, save } from "@/api/erp/accountRuleSet"; //选项设置接口

export default {
  props: {},
  data() {
    return {
      data: {}, // 数据
      type: "", //获取数据类型
    };
  },
  components: {
    cardWrapper,
    previewSubject,
  },
  created() {},
  methods: {
    hover(item) {
      this.$emit("description", item);
    },
    handleChange(event, code) {
      //多选框点击事件
      console.log(event);

      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].code == code) {
          if (event.target.checked) {
            // this.$set(this.data[i], "isEnable", "1"); //启用
            this.$set(this.data[i], "value", "1");
          } else {
            // this.$set(this.data[i], "isEnable", "0"); //禁用
            this.$set(this.data[i], "value", "0");
          }
        }
      }
    },
    handleInputChange(event, code) {
      //输入框事件
      console.log(event);
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].code == code) {
          this.data[i].value = event.data;
        }
      }
      console.log(this.data);
    },
    handleRadioChange(event, code) {
      //单选框事件
      console.log(event);
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].code == code) {
          this.data[i].value = event.target.value;
        }
      }
      console.log(this.data);
    },
    handleSelectChange(event,code){
      //下拉框事件
      console.log(event);
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].code == code) {
          this.data[i].value = event;
        }
      }
      console.log(this.data);
    },
    submit() {
      //提交数据
      save(this.data)
        .then((response) => {
          if (response.code == 200) {
            this.$message.success("保存成功");
            this.$emit("refresh", "2");
          }
        })
        .catch((error) => {});
    },
    getData(type) {
      this.type = type;
      list({ moduleCode: type })
        .then((response) => {
          if (response.code == 200) {
            this.data = response.data;
          }
        })
        .catch((error) => {});
    },
    preview() {
      //科目预览
      //todo 打开预览模态框（可搜索树查看）
      this.$refs.previewSubject.detail();
    },
  },
};
</script>
<style lang="less" scoped>
.back:hover {
  background: #eee;
}

.padding-5 {
  padding: 5px;
  display: block;
}
.padding-4 {
  padding: 4px 0;
}

.btn-save {
  width: 100%;
  height: 50px;
  line-height: 50px;
  box-shadow: 0 0 10px #ddd;
  text-align: center;
  position: absolute;
  bottom: 0;
  .btn {
    margin-right: 10px;
  }
}

.text-after-input {
  padding: 4px 0;
}
.text-after-title {
  line-height: 35px;
  padding-left: 5px;
}
.text-after-radio {
  line-height: 28px;
  padding-left: 5px;
}
.color-777 {
  color: #777;
}

@iterations: 120;
.mixin-loop (@index) when (@index > 0) {
  .padding-left-@{index} {
    padding-left: (1px * @index);
  }

  .mixin-loop(@index - 1);
}
.mixin-loop (1) {
}
.mixin-loop(@iterations);
</style>